<template>
    <div>
      <!-- <h1>推荐</h1> -->
      <div class="content">
        <div class="title">
          <ul>
            <li v-for="item in tab" :key="item.id">
                <!-- 标题栏 -->
              <span class="span1" @click="goSon(item)">{{ item.name }}</span>
              <!-- 小信息栏 -->
              <div>
                <span class="s2">{{item.istop}}</span>
                <span class="s3">{{item.store}}</span>
                <span class="s4">{{item.comments}}</span>
                <span class="s5">{{item.time}}</span>
              </div>
              
            </li>
            <div class="banner">
              <p>鄂尔多斯的通告，呼和浩特跳楼的母亲</p>
                  <div class="img">
                    <img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/09fa6257a33043fc9e59b0b5321ba34d~noop.image?_iz=58558&from=article.pc_detail&x-expires=1668270327&x-signature=ms44X4aN4HXuCwoWaymMtvtFFqc%3D" alt="">
                  <img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2a5e6c3f55704c9b8b3a9688a089e2a5~noop.image?_iz=58558&from=article.pc_detail&x-expires=1668270404&x-signature=a30gFE0h%2BT%2FezP2PxZ9ww%2FXmaHM%3D" alt="">
                  <img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c14cc55d3d8d46b5aad422418cc5004f~noop.image?_iz=58558&from=article.pc_detail&x-expires=1668270504&x-signature=triNugx3SrvCiXTsMrmvE6qyPZ0%3D" alt="">
                  </div>
                  <!-- <img :src="item.pic2" alt="">
                  <img :src="item.pic3" alt=""> -->
                </div>
          </ul>
        </div>
      
          <div>
            <router-view></router-view>
          </div>
        
      </div>
    </div>
  </template>
  
  <script>
//   import data from "./data/index.json";
  import axios from "axios";
  // axios会返回一个promise对象，我们可以很方便通过then方法链式调用
  export default {
    data() {
      return {
        tab: [],
      };
    },
    created() {
      axios.get("http://localhost:3006/list").then((res) => {
        console.log(res);
      });
      this.getData();
      
    },
    methods: {
      goSon(item) {
        this.$router.push({
          path: "/hotDetail",
          query: {
           ...item
          },
         
        });
        console.log(this.$route);
        // console.log(this.$routr)
      },
      async getData() {
        const data = await axios.get("http://localhost:3006/list");
        this.tab = [...data.data.data1];
        // console.log(data.data.data);
      },
    },
  };
  </script>
  
  <style scoped>
  ul li{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-bottom: 15px;

  }
  ul li .span1{
    font-size: 23px;
  }
  ul li .span1:hover{
    color:red;
  }
  ul li div span{
    font-size: 15px;
    margin-right:10px ;
    color: rgb(170, 172, 172);
  }
  ul li div .s2{
    color: red;
  }
  ul .banner{
    display: flex;
    flex-direction: column;
  }
  ul .banner p{
    font-size: 23px;
  }
  ul .banner p:hover{
    color: red;
  }
  ul .banner .img{
    display: flex;
  }
  ul .banner .img img{
    width: 120px;
    height: 80px;
    margin-left: 5px;
  }
  /* .RecomDetail{
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items:center;
  } */
  /* .content {
    display: flex;
  } */
  </style>
  